<template>
  <div class="login--box">
    <ul class="login-ul">
      <li class="login-ul_item">
        <input class="delete-auth" type="text"
               @keydown="phoneDown"
               @blur="phoneBlur"
               @focus="phoneFocus"
               v-model="user.userPhone"
               placeholder="请输入手机号">
        <span class="delete-icon" @click="phoneClick" v-show="phoneShow">
              <img src="../assets/icon/delete.png" alt="">
            </span>
      </li>
      <li class="login-ul_item">
        <input class="delete-auth" type="password"
               @keydown="pswDown"
               @blur="pswBlur"
               @focus="pswFocus"
               v-model="user.userpswd"
               placeholder="请输入密码">
        <span class="delete-icon" @click="pswClick" v-show="pswShow"><img src="../assets/icon/delete.png" alt=""></span>
      </li>
    </ul>
    <span class="login-box_title">已有账户，
          <router-link to="/root/resetPassword">
            <a href="#" class="color_blue">忘记密码？</a>
          </router-link>
        </span>
    <div class="register--button">
      <button class="button" @click="maskLogin">登录</button>
    </div>
  </div>
</template>
<script>
  export default {
    name: "login",
    data() {
      return {
        phoneShow: false,
        pswShow: false,
        // 双向绑定：将数据发送到后台

        user: {
          userPhone: '',
          userpswd: '',
        }
      }
    },
    methods: {
      // 弹出提示框
      maskLogin() {
        const re = /^1[35789]\d{9}$/;
        if (re.test(this.user.userPhone) && this.user.userpswd.length >= 6) {
          this.$api.login({
            phoneNumber: this.user.userPhone,
            password: this.user.userpswd,
          }).then((data) => {
            if (data.data.code === 3001) {
              console.log('用户登录成功');
              localStorage.setItem('userPhone', this.user.userPhone);
              this.$routes.push('/root/personal');
            } else if (data.data.code === 3002) {
              console.log('账号或密码输入不正确');
            } else if (data.data.code === 3003) {
              console.log('未知错误，请稍后再试');
            }
            console.log(data);
          }).catch((error) => {
            console.log(error);
          })
        } else if (!this.user.userpswd || !this.user.userPhone) {
          console.log('账号或密码不能为空！')
        } else if (!re.test(this.user.userPhone) && this.user.userpswd > 6) {
          console.log('输入的手机号码格式不正确')
        }
      },
      // 键盘事件
      phoneDown() {
        this.phoneShow = true;
        /*if (this.user.userPhone === ''){
          this.phoneShow = false;
        }*/
      },
      pswDown() {
        this.pswShow = true;
      },
      // 失焦事件
      phoneBlur() {
        this.phoneShow = false;
      },
      pswBlur() {
        this.pswShow = false;
      },
      // 聚焦事件
      phoneFocus() {
        if (this.user.userPhone.length > 0) {
          this.userPhone = true;
        }
      },
      pswFocus() {
        if (this.user.userpswd.length > 0) {
          this.pswShow = true;
        }
      },
      // 图标全部清除
      phoneClick() {
        this.user.userPhone = '';
      },
      pswClick() {
        this.user.userpswd = '';
      }
    },
    mounted() {
      if (localStorage.getItem('user')) {
        this.user.userPhone = localStorage.getItem('user');
      } else {
        this.user.userPhone = '';
      }
    }
  }
</script>

<style scoped>
  * {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  .login--box {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }

  .login-ul {
    display: block;
    margin-top: 1.1333rem;
  }

  .login-ul li {
    display: block;
    height: 1.1733rem;
    padding-left: .8rem;
    padding-right: .8rem;
    position: relative;
  }

  .delete-icon img {
    vertical-align: middle;
    width: .65333rem;
    height: .6rem;
  }

  .delete-icon {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    right: 1.1rem;
    bottom: .3rem;
  }

  .color_blue {
    color: #196fe3;
  }

  .login-ul_item::after {
    content: '';
    display: block;
    border-bottom: 1px solid #c8c8cb;
    vertical-align: middle;
  }

  .login-ul_item input {
    line-height: 1.1633rem;
    padding-left: .42666rem;
    outline: none;
    font-size: .37333rem;
    color: #333;
    border: none;
    padding-right: .42666rem;
  }

  .login-box_title {
    display: block;
    line-height: 1.173rem;
    text-align: right;
    padding-right: .8rem;
  }

  .register--button {
    margin-top: 1rem;
    text-align: center;
  }

  .button {
    width: 6.88rem;
    line-height: 1.1733rem;
    color: white;
    background-color: #4aa5fd;
    font-size: .4rem;
    border-radius: .5rem;
    outline: none;
    border: none;
    margin-top: .7733rem;
  }
</style>
